<template>
	<view>
		<view class="wrap">
				<cu-custom bgColor="bg-gradual-blue" :isBack="true">
					<block slot="backText">返回</block>
					<block slot="content">{{JobName}}</block>
				</cu-custom>
				<!-- 头部开始 -->
				<view class="goods-header-wrap">
					<view class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 1 == goodsNav}" @click="setNav(1)">
						基础信息
					</view>
					<view class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 2 == goodsNav}" @click="setNav(2)">
						维保点位
					</view>
					<view class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 3 == goodsNav}" @click="setNav(3)">
						维保明细
					</view>
				</view>
				<view v-if="goodsNav==1">
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">计划名</view>
								<view class="goods-stock">{{JobEntity.JobName}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">计划类型</view>
								<view class="goods-stock">{{JobEntity.JobTypeName}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">维保后业主确认</view>
								<view class="goods-stock">{{JobEntity.MaintenanceConfirmName}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">计划期限</view>
								<view class="goods-stock">{{JobEntity.TimeSlot}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">循环周期</view>
								<view class="goods-stock">{{JobEntity.JobTaskName}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock goods-stock-title">模式</view>
								<view class="goods-stock">{{JobEntity.TeamName}}</view>
							</view>
						</view>
					</view>
					<view class="goods-item-wrap">
						<view class="goods-content-wrap">
							<view class="goods-stock-wrap">
								<view class="goods-stock">上次维保时间</view>
								<view class="goods-stock">{{JobEntity.LastSignTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsNav==2">
					<view class="chartsMain">
						<wyb-table ref="table" first-line-fixed='true' :loading='loading'  first-col-bg-color='#fff' header-ft-color='#fff' header-bg-color='#0081ff' :headers="qrcodeHeaders" :contents="qrcodeContents" height="auto" :url-col="urlCol" />
					</view>
				</view>
				<view v-if="goodsNav==3">
					<view class="chartsMain">
						<wyb-table ref="table" first-line-fixed='true' :loading='loading'  first-col-bg-color='#fff' header-ft-color='#fff' header-bg-color='#0081ff' :headers="signHeaders" :contents="signContents" height="auto" :url-col="urlCol" />
					</view>
				</view>
		</view>
	</view>
</template>


<script>
import request from '@/common/request.js';
//import wybTable from '@/components/wyb-table/wyb-table.vue'
import wybTable from '@/pages-others/components/wyb-table/wyb-table.vue'
export default {
	components: {
		wybTable
	},
	data() {
		return {
			jobId:'',
			JobName:'',
			JobEntity:{},
			goodsNav: 1,
			loading:false,
			qrcodeHeaders: [{
				label: '序号',
				key: 'qrcode_sort',
				width:150
			},{
				label: '名称',
				key: 'qrcode_title',
				width:450
			}, {
				label: '状态',
				key: 'qrcode_status_name',
				width:150
			}],
			qrcodeContents: [
			],
			signHeaders: [{
				label: '维保标准',
				key: 'TopicTitle',
				width:375
			}, {
				label: '选项',
				key: 'TopicOption',
				width:375
			}],
			signContents: [
			],
		};
	},
	mounted() {
		console.log('mounted')
	},
	computed: {
	},
	onLoad(options) {
		let that=this
		that.JobName=options.JobName
		that.jobId=options.id
		that.getTaskDetail();
	},
	onShow(){
	},
	methods: {
		setNav(goodsNav) {
			let that=this
			that.goodsNav=goodsNav
		},
		getTaskDetail(){
			let that=this
			uni.showLoading({
				title: '加载中...'
			})
			let opts = {
				url: 'spareapi/GetMyTaskDetail',
				method: 'get'
			};
			let requestData={
				jobId:that.jobId
			}
			request.httpTokenRequest(opts,requestData).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.JobEntity=res.data.data
					that.qrcodeContents=res.data.data.qrcodeList
					that.signContents=res.data.data.QrcodeTopicInfoList
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
	}
};
</script>


<style lang="scss" scoped>
	.goods-item-wrap {
		border-radius: 8rpx;
		background: #FFFFFF;
		display: flex;
		padding: 36rpx 36rpx;
		//margin: 12rpx;
		border-bottom: 1px solid #F3F4F8;
		//width:100%;
		.goods-content-wrap{
			width: 100%;
		}
		.goods-name {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			position: relative;
			border-bottom: 1px solid #F3F4F8;
			padding-bottom: 20rpx;
		}
		.goods-name-title{
			display: block;
			float: left;
		}
		.goods-name-type{
			display: block;
			float:right;
			color: #3B69FD;
			margin-right: 20rpx;
		}
		.goods-stock-wrap {
			display: flex;
			color: #262425;
			font-size: 28rpx;
			justify-content: space-between;
		}
		
		.goods-stock {
			font-size: 28rpx;
			color: #262425;
			line-height: 32rpx;
		}
		.goods-stock-isok{
			margin-right: 10rpx;
			font-size: 38rpx;
			color: #00B52A;
			line-height: 32rpx;
			font-weight: 700;
		}
		.goods-stock-title{
			color:black;
		}
		.goods-stock-middle{
			margin-right: 10rpx;
			font-size: 38rpx;
			color: #636571;
			line-height: 32rpx;
			font-weight: 700;
		}
		.goods-shangxiaxian {
			font-size:24rpx;
			color: #3F71C4;
			margin-top: 14rpx;
		}
		.goods-option-item {
			padding: 8rpx 16rpx;
			border-radius: 36rpx;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}
	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
		margin-bottom: 10rpx;
	}
	.goods-header-item{
		width:49%;
		text-align: center;
	}
	.goods-header-item-active{
		font-size: 30rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}
	.goods-header-item-active::after{
		position: absolute;
		left: 50%;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
		width: 60rpx;
		margin-left: -30rpx;
		border-radius: 200rpx;
	}
	.goods-header-item-action {
		// font-size: 32rpx;
		// font-color: #333333;
		// font-weight: bold;
		position: relative;
	}
	
	.goods-header-item-action::after {
		// position: absolute;
		// left: 0;
		// right: 0;
		// background: #4372fe;
		// height: 8rpx;
		// content: "";
		// bottom: -12rpx;
	}
	.extraPosition{
		position: absolute;
		right: -5rpx;
		top: -10rpx;
		font-size: 20rpx;
		padding: 0rpx 10rpx;
		height: 28rpx;
		color: #ffffff;
		background-color: #dd514c;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish-goods-btn {
		width:160rpx;
		background: #e7612e;
		color: #FFFFFF;
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
		float:right;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.publish-goods-btn1 {
		width:160rpx;
		background: #3B69FD;;
		color: #FFFFFF;
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
		float:right;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
</style>